<html>
    <head>
        <title>Test</title>
        <style>

        widget.hsv {
          var(hue) : #ff0000;
          size:max-content;
        }

        widget.hsv > .hue
        {
          display:block;
          width:256dip;
          border:none;
          height: 5dip;
          background: linear-gradient(to left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
        }

        widget.hsv > div { flow:stack; size:256dip; margin:*; }
        widget.hsv > div > .sat { size:256dip; 
                                  background: linear-gradient(to left, #ffffff 0%, var(hue,#ff0000) 100%);}
        widget.hsv > div > .val { size:256dip; 
                                  background: linear-gradient(to bottom, rgba(0,0,0,0.0) 0%, rgba(0,0,0,1.0) 100%);}

        </style>
        <script type="text/tiscript">

          event change $(widget.hsv > .hue) {
            this.$p(widget.hsv).style.variables {
              hue : Color.hsv(360 - this.value,1,1)
            };
          }

        </script>
    </head>
    <body>

        <widget.hsv>
          <div>
            <div.sat/>
            <div.val/>
          </div>
          <input|hslider.hue min=0 max=360 />            
        </widget>
    </body>
</html>